<template>
  <div class="app-container" v-loading="loading">
    <el-form ref="queryRef" :inline="true" :model="queryParams" class="form-box">
      <div style="display: flex;flex-wrap: wrap">
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.areaCode" clearable placeholder="库区编号" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.areaName" clearable placeholder="库区名称" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="orderStatus">
            <el-select clearable placeholder="状态" v-model="queryParams.status">
              <el-option label="全部" value=""></el-option>
              <el-option label="启用" value="0"></el-option>
              <el-option label="停用" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button icon="Search" type="primary" @click="clickSearch">查询</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </div>

      <el-row>
        <el-form-item class="btns">
          <el-button icon="Plus" type="primary" @click="handleAdd" v-hasPermi="['basic:area:save']">新建库区
          </el-button>
          <el-button type="danger" @click="batchDelete" v-hasPermi="['basic:area:delete']">删除所选</el-button>
        </el-form-item>
      </el-row>
    </el-form>
    <vxe-table ref="tableRef" :data="tableData" :height="tableHeight" align="center" border
      :row-config="{ isCurrent: true, isHover: true }" :checkbox-config="{ checkMethod: visibleMethod, trigger: 'row' }">
      <vxe-column type="checkbox" width="80"></vxe-column>
      <vxe-column title="序号" type="seq" width="60"></vxe-column>
      <vxe-column field="status" title="状态" width="100">
        <template v-slot="{ row }">
          <el-tag v-if="row.status == 0">启用</el-tag>
          <el-tag v-else class="ml-2" type="danger">停用</el-tag>
        </template>
      </vxe-column>
      <vxe-column field="areaCode" title="库区编号" width="200"></vxe-column>
      <vxe-column field="areaName" title="库区名称" width="280"></vxe-column>
      <vxe-column field="companyName" width="150" title="公司名称"></vxe-column>
      <vxe-column field="warehouseName" title="仓库" width="150"></vxe-column>
      <vxe-column field="zone" title="区域类型" width="150">
        <template #default="{ row }">
          {{ returnDictLabel(zone_type, row.zone) }}
        </template>
      </vxe-column>
      <vxe-column field="remark" title="备注"></vxe-column>
      <vxe-column fixed="right" title="操作">
        <template #default="{ row }">
          <el-button type="text" @click="clickEdit(row)" v-hasPermi="['basic:area:save']">编辑</el-button>
          <el-button type="text" style="color:green" @click="clickView(row)">查看</el-button>
          <el-button v-if="row.status == '0'" type="text" style="color:red" @click="handleDelete(row)"
            v-hasPermi="['basic:area:delete']">删除</el-button>
        </template>
      </vxe-column>
    </vxe-table>
    <pagination v-show="total > 0" v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNum" :total="total"
      @pagination="getList" />

    <EditArea :isShowDialog="isShowDialog" v-if="isShowDialog" :title="title" :rowData="rowData" :isView="isView"
      @cancel="handleClose"></EditArea>
  </div>
</template>

<script setup>
import { onMounted, ref, nextTick } from "vue";
import { areaDelete, areaGetList } from "@/api/scApi";
import EditArea from "@/views/basicData/areaManagement/editArea.vue";

const { proxy } = getCurrentInstance();
const { zone_type } = proxy.useDict("zone_type");
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
})
const rowData = ref({})
const title = ref('')
const tableData = ref([])
const total = ref(0)
let isShowDialog = ref(false)
let isView = ref(false)
let loading = ref(false)
let tableHeight = ref(0);
onMounted(() => {
  nextTick(() => {
    tableHeight.value = window.innerHeight - 350;
  })
  window.onresize = () => {
    tableHeight.value = document.body.scrollHeight - 350;
  }
  getList()
})

function clickSearch () {
  getList()
}

const resetQuery = () => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    code: "",
    name: "",
    status: "",
  }
  getList();
};

function getList () {
  loading.value = true
  areaGetList({
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize,
    param: queryParams.value
  }).then(res => {
    loading.value = false
    tableData.value = res.data
    total.value = res.total
  }).finally(() => {
    loading.value = false
  })
}


//新增按钮
let handleAdd = () => {
  isShowDialog.value = true;
  title.value = "新增库区";
}

// 编辑按钮
async function clickEdit (row) {
  rowData.value = row
  title.value = "编辑库区";
  isShowDialog.value = true
}

// 删除按钮
function handleDelete (row) {
  deleteData([row.areaId])
}

//删除所选
function batchDelete () {
  const $table = proxy.$refs.tableRef
  if ($table) {
    const selectRecords = $table.getCheckboxRecords()
    let ids = selectRecords.map(item => item.areaId)
    deleteData(ids)
  }
}

function deleteData (ids) {
  if (!ids || ids.length === 0) {
    return
  }
  proxy.$modal.confirm('是否确认删除该数据？').then(() => {
    areaDelete({ ids: ids }).then(res => {
      if (res.code === 200) {
        getList();
        proxy.$modal.msgSuccess("删除成功");
      }
    })
  }).catch(() => {
  });
}

function clickView (row) {
  rowData.value = row
  title.value = "查看库区"
  isShowDialog.value = true
  isView.value = true
}

//是否显示复选框
function visibleMethod ({ row }) {
  return row.status == '0'
}

function handleClose (isReload) {
  rowData.value = {}
  isShowDialog.value = false
  isView.value = false
  if (isReload) {
    getList()
  }
}

</script>

<style scoped lang="scss"></style>